<template>
  <div class="container">
    <el-card shadow="always" class="analysis">
      <div class="title">  {{ $moment().subtract(1, "day").format("YYYY-MM-DD") }}综合分值分析</div>
      <el-row :gutter="20">
        <el-col :span="8"> <div class="main"></div> </el-col>
        <el-col :span="8"> <div class="radar"></div></el-col>
        <el-col :span="8">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="分类" > </el-table-column>
            <el-table-column prop="max" label="分值"> </el-table-column>
            <el-table-column prop="value" label="得分"> </el-table-column>
          </el-table>
        </el-col>
      </el-row>





    <template v-if="recordList.length&&recordList[0].workstationScoreItemResponseList.length">
      <div>
          <div class="title">
       综合扣分明细
      </div>
    <rz-height></rz-height>
    <el-table :data="recordList.length&&recordList[0].workstationScoreItemResponseList" border style="width: 100%">
        <el-table-column prop="itemTypeStr" label="分类" width="150">
        </el-table-column>
        <el-table-column prop="content" label="扣分明细">
                <template slot-scope="scope">
                  <div>
                    {{scope.row.content|filterHtml}}
                  </div>
                </template>
        </el-table-column>
        <el-table-column prop="score" label="扣分分值"  width="100"> 
        </el-table-column>
      
      </el-table>
      </div>
    </template>















    </el-card>
    <rz-height></rz-height>
    <el-card shadow="always">
      <div class="title">近10天综合得分</div>
      <rz-height></rz-height>
      <div class="line"></div>
    </el-card>
    <rz-height></rz-height>
    <el-card shadow="always">
      <div class="title">近10天更新记录</div>
      <rz-height></rz-height>
      <el-table :data="recordList" border style="width: 100%"  ref="table">






     <el-table-column type="expand" width="1">
      <template slot-scope="props">

          <div class="table">
               <el-table :data="props.row.workstationScoreItemResponseList" border style="width: 100%">
        <el-table-column prop="itemTypeStr" label="分类"  width="150">
        </el-table-column>
        <el-table-column prop="content" label="扣分明细">
                <template slot-scope="scope">
                  <div>
                    {{scope.row.content|filterHtml}}
                  </div>
                </template>
        </el-table-column>
        <el-table-column prop="score" label="扣分分值"  width="100">
           </el-table-column>
      
      </el-table>

          </div>
      </template>
    </el-table-column>

















        <el-table-column prop="createTimeStr" label="评估时间">
        </el-table-column>
        <el-table-column prop="checkRecordScore" label="检查台账"> </el-table-column>
        <el-table-column prop="checkResultScore" label="定期检查">
        </el-table-column>
        <el-table-column prop="jointConferenceScore" label="联席会议"> </el-table-column>
        <el-table-column prop="quickCheckScore" label="食品安全快检"> </el-table-column>
        <el-table-column prop="safetySuperviseUnitScore" label="经营单位"> </el-table-column>
        <el-table-column prop="trainingScore" label="组织培训"> </el-table-column>
        <el-table-column prop="publicityScore" label="公示"> </el-table-column>
        <el-table-column prop="total" label="综合得分"> </el-table-column>
 <el-table-column  label="操作">
            <template slot-scope="scope">
            <!-- <el-button size="mini" type="primary"  @click="view(scope.row)"
              >查看</el-button> -->
              <a href="javascript:;" style="font-size:12px;color:#1890ff" @click="view(scope.row)" v-if="scope.row.workstationScoreItemResponseList.length">
                  <span>扣分明细 </span>
                 <i style="display:inline-block;" class="el-icon el-icon-arrow-right"></i>
              </a>
            
          </template>
           </el-table-column>
        
      </el-table>
    </el-card>
  </div>
</template>
<script>
import {
  findLastByWorkstationId,
  findListByConditionSafety,
} from "@/api/modules/workstation";

var echarts = require("echarts");
export default {
  // props:[],
  // 页面加载
  created() {
    this.getList();
    this.findListByConditionSafety();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      tableData: [],
      data: {},
      recordList: [],
    };
  },
  // 方法
  methods: {
    meterInit() {
      var chartDom = document.querySelector(".main");
      var myChart = echarts.init(chartDom);
      let option = {
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 20,
                color: [
                  [0.59, "#ff0000"],
                  [0.79, "#ffd700"],
                  [1, "#008000"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -20,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            splitLine: {
              distance: -35,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 30,
              fontSize: 15,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
              color: "auto",
            },
            data: [
              {
                value: this.data.total,
              },
            ],
            center: ["50%", "50%"],
            radius: "80%",
          },
        ],
      };
      myChart.setOption(option);
    },
    radarInit() {
      var chartDom = document.querySelector(".radar");
      var myChart = echarts.init(chartDom);
      let option = {
               lineStyle:{

color: "#1890ff" ,
},
        title: {
          // text: "Basic Radar Chart",
        },
        tooltip: {
          show: true,
        },
        // legend: {
        //   data: ["Allocated Budget", "Actual Spending"],
        // },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "检查台账", max: this.data.checkRecordTotal },
            { name: "定期检查", max: this.data.checkResultTotal },
            { name: "联席会议", max: this.data.jointConferenceTotal },
            { name: "食品安全快检", max: this.data.quickCheckTotal },
            { name: "经营单位", max: this.data.safetySuperviseUnitTotal },
            { name: "组织培训", max: this.data.trainingTotal },
            { name: "宣传公示", max: this.data.publicityTotal },
          ],
                         axisName: {
        // formatter: '【{value}】',
        color: '#1890ff'
      },
        splitArea: {
        areaStyle: {
          // color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
        },
        series: [
          {
            name: "分值",
            type: "radar",
            data: [
              {
                value: [
                  this.data.checkRecordScore<0?0: this.data.checkRecordScore,
                  this.data.checkResultScore<0?0: this.data.checkResultScore,
                  this.data.jointConferenceScore<0?0: this.data.jointConferenceScore,
                  this.data.quickCheckScore<0?0: this.data.quickCheckScore,
                  this.data.safetySuperviseUnitScore<0?0: this.data.safetySuperviseUnitScore,
                  this.data.trainingScore<0?0: this.data.trainingScore,
                  this.data.publicityScore<0?0: this.data.publicityScore,
                ],
                     itemStyle: {
              normal: {
                color: '#1890ff',
                //  opacity: 0
              },
            },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    lineInit() {
      let chartDom = document.querySelector(".line");
      let myChart = echarts.init(chartDom);
      let option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "综合得分",
            "检查台账",
            "定期检查",
            "联席会议",
            "食品安全快检",
            "经营单位",
            "组织培训",
            "宣传公示",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.recordList.map((x) => x.createTimeStr).reverse(),
          axisLabel: {
            //底部文字倾斜
            interval: 0,
            rotate: 25,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "综合得分",
            data: this.recordList.map((x) => x.total).reverse(),
          },
          {
            itemStyle: { normal: { label: { show: true } } },
            type: "line",
            name: "检查台账",
            data: this.recordList.map((x) => x.checkRecordScore).reverse(),
          },
          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "定期检查",
            data: this.recordList.map((x) => x.checkResultScore).reverse(),
          },
          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "联席会议",
            data: this.recordList.map((x) => x.jointConferenceScore).reverse(),
          },
          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "食品安全快检",
            data: this.recordList.map((x) => x.quickCheckScore).reverse(),
          },
          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "经营单位",
            data: this.recordList.map((x) => x.safetySuperviseUnitScore).reverse(),
          }, {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "组织培训",
            data: this.recordList.map((x) => x.trainingScore).reverse(),
          }, {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "宣传公示",
            data: this.recordList.map((x) => x.publicityScore).reverse(),
          },
        ],
        // this.recordList.map(x=>{})
      };
      myChart.setOption(option);
    },
    getList() {
      findLastByWorkstationId({
        params: {
          workstationId: sessionStorage.getItem("workId"),
        },
      }).then((res) => {
        this.data = res.data;
        // findLastByWorkstationId
        this.tableData = res.data.workstationScoreMiddleResponseList;
        this.$nextTick(() => {
          this.meterInit();
          this.radarInit();
        });
      });
    },
    findListByConditionSafety() {
      findListByConditionSafety({
        endDate: this.$moment().format("YYYY-MM-DD"),
        isPage: 0,
        page: 1,
        pageSize: 10,
        sort:1,
        startDate: this.$moment().subtract(10, "day").format("YYYY-MM-DD"),
        workstationId: sessionStorage.getItem("workId"),
      }).then((res) => {
        this.recordList = res.data;
        this.lineInit();
      });
    },
        view(row){
             let $table = this.$refs.table;
       $table.toggleRowExpansion(row)
    }
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.container {
  // background-color: #fff;

  .title {
    font-size: 20px;
  }
  .main,
  .radar,
  .line {
    height: 280px;
    width: 100%;
  }
  .analysis {
    /deep/ .el-table--medium .el-table__cell {
      padding: 7px 0;
    }
  }
  /deep/ .el-icon-arrow-right{
    display: none ;
 
  }
}
</style>